<style>
.approver-setup .container ul.tab_btn li {
    display: inline-block;
    margin-right: 10px;
}
.approver-setup input[type="radio"],
.approver-setup input[type="checkbox"] {
    position: relative;
    top: 2px;
    margin-right: 2px;
}
.approver-setup select {
    padding:0 5px;
}
.tree-wrap {
    position: relative;
}
.tree-wrap .tree-static{
    display: none;
    top: 32px;
    position: absolute;
    border: 1px solid #ddd;
    border-radius: 2px;
    width: 91%;
    z-index: 9;
    background: #fff;
    max-height: 300px; 
    overflow: hidden;
    overflow-y: scroll;
}
.arrpover_group_box li{
    margin-bottom:5px;
}
</style>

<!-- 页面外套 -->
<div class="page-wrapper" id="setup_approval">

    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped">
        <!-- 工具条组 -->
        <div class="tool-group">
            <form class="tool-search">
                <input type="hidden" name='page'>
                <input type="hidden" name='recPerPage'>
                <input type="hidden" name='sid' value='0'>
                <input type="hidden" name='search' value=''>
            </form>
            <div class="tool-deal">
                <label><button class="btn btn-primary tool_add_btn"> <i class="icon icon-plus"></i> 添加</button></label>
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>

    <!-- 删除盒子 -->
    <div class="modal modal-for-page fade line_del_box" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">审批添加</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <p class="text-danger"><i class="icon icon-warning-sign"></i> 是否删除？</p>
                        <form><input type="hidden" name="id"></form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger line_del_submit">提交</button>
                </div>                
            </div>
        </div>
    </div>

    <!-- 添加盒子 -->
    <div class="modal modal-for-page fade tool_add_box" aria-hidden="false">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">审批添加</h4>
                </div>
                <div class="modal-body">
                    <form class="container form-horizontal">
                        <!-- 基础设置 -->
                        <div class="panel">
                            <div class="panel-heading">基础设置</div>
                            <div class="panel-body">
                                <div style="max-width:600px">
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批名称</label>
                                        <div class="col-sm-6 tree-wrap">
                                            <input class="form-control" name="approvalPageName" readonly>
                                            <input type="hidden" name="fid" title="功能表id 页面数字id">
                                            <ul class="tree tree-static tree-lines document_click_hide"></ul>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批说明</label>
                                        <div class="col-sm-6"><textarea class="form-control" name="text"></textarea></div>
                                    </div>
                                </div>
                           </div>
                        </div>
                        
                        <!-- 流程设置 -->
                        <div class="panel">
                            <div class="panel-heading">流程设置</div>
                            <div class="panel-body">
                                <div style="max-width:600px">
                                    <div class="form-group">
                                        <label class="col-sm-2 required">发起人</label>
                                        <div class="col-sm-6"><input class="form-control" name="promoter" readonly><input type="hidden" name="fqstaffids"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">抄送人</label>
                                        <div class="col-sm-6"><input class="form-control" name="copyer" readonly><input type="hidden" name="csstaffids"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批人</label>
                                        <div class="col-sm-6">
                                            <ul class="arrpover_group_box"><!-- JS推进 --></ul>
                                            <button type="button" class="btn arrpover_group_addBtn">+</button>
                                        </div>
                                    </div>
                                </div>
                           </div>
                        </div>
                        
                        <!-- 高级设置 -->
                        <div class="panel">
                            <div class="panel-heading">高级设置</div>
                            <div class="panel-body">
                                <div style="max-width:600px">
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批人去重</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" name="unique">
                                                <option value="1">同一审批人在流程中出现多次时,只保留第一次</option>
                                                <option value="2">同一审批人仅在审批中连续出现时,自动去重</option>
                                                <option value="3">不启用自动去重</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">通知抄送人</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" name="notice">
                                                <option value="1">发起通知时</option>
                                                <option value="2">全部同意后通知</option>
                                                <option value="3">发起和全部同意都通知</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                           </div>
                        </div>
                    </form>
                    <hr>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary tool_add_submit">提交</button>
                </div>          
            </div>
        </div>
    </div>

    <!-- 修改盒子 -->
    <div class="modal modal-for-page fade line_edit_box" aria-hidden="false">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">审批修改</h4>
                </div>
                <div class="modal-body">
                    <form class="container form-horizontal">

                        <input type="hidden" name="id">

                        <!-- 基础设置 -->
                        <div class="panel">
                            <div class="panel-heading">基础设置</div>
                            <div class="panel-body">
                                <div style="max-width:600px">
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批名称</label>
                                        <div class="col-sm-6 tree-wrap">
                                            <input class="form-control" name="approvalPageName" readonly>
                                            <input type="hidden" name="fid" title="功能表id 页面数字id">
                                            <ul class="tree tree-static tree-lines document_click_hide"></ul>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批说明</label>
                                        <div class="col-sm-6"><textarea class="form-control" name="text"></textarea></div>
                                    </div>
                                </div>
                           </div>
                        </div>
                        
                        <!-- 流程设置 -->
                        <div class="panel">
                            <div class="panel-heading">流程设置</div>
                            <div class="panel-body">
                                <div style="max-width:600px">
                                    <div class="form-group">
                                        <label class="col-sm-2 required">发起人</label>
                                        <div class="col-sm-6"><input class="form-control" name="promoter" readonly><input type="hidden" name="fqstaffids"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">抄送人</label>
                                        <div class="col-sm-6"><input class="form-control" name="copyer" readonly><input type="hidden" name="csstaffids"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批人</label>
                                        <div class="col-sm-6">
                                            <ul class="arrpover_group_box"><!-- JS推进 --></ul>
                                            <button type="button" class="btn arrpover_group_addBtn">+</button>
                                        </div>
                                    </div>
                                </div>
                           </div>
                        </div>
                        
                        <!-- 高级设置 -->
                        <div class="panel">
                            <div class="panel-heading">高级设置</div>
                            <div class="panel-body">
                                <div style="max-width:600px">
                                    <div class="form-group">
                                        <label class="col-sm-2 required">审批人去重</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" name="unique">
                                                <option value="1">同一审批人在流程中出现多次时,只保留第一次</option>
                                                <option value="2">同一审批人仅在审批中连续出现时,自动去重</option>
                                                <option value="3">不启用自动去重</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 required">通知抄送人</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" name="notice">
                                                <option value="1">发起通知时</option>
                                                <option value="2">全部同意后通知</option>
                                                <option value="3">发起和全部同意都通知</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                           </div>
                        </div>
                    </form>
                    <hr>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary line_edit_submit">提交</button>
                </div>          
            </div>
        </div>
    </div>

    <!-- 审批人设置 -->
    <div class="modal modal-for-page fade approver-setup setup_approval_approverSetup_box" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">审批人设置</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <ul class="tab_btn">
                            <li><label><input type="radio" name="tabBtn" value="1" checked>指定成员</label></li>
                            <li><label><input type="radio" name="tabBtn" value="2">上级</label></li>
                            <li><label><input type="radio" name="tabBtn" value="3">连续多级上级</label></li>
                            <li><label><input type="radio" name="tabBtn" value="4">职位</label></li>
                            <li><label><input type="radio" name="tabBtn" value="5">表单中的交接人作为审批</label></li>
                        </ul>
                        <hr>
                        <ol>
                            <!-- 指定成员 -->
                            <li>
                                <form>
                                    <dl>
                                        <dt>多人审批时采用的审批方式</dt>
                                        <dd><label class="thin"><input type="radio" name="tab1_crowd" value="1" checked>依次审批</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab1_crowd" value="2">会签（须所有审批人同意）</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab1_crowd" value="3">或签（一名审批人同意或拒绝即可）</label></dd>
                                    </dl>
                                    <dl>
                                        <dt>人员选择 <span class="thin text-gray small">最多可选择10人</span></dt>
                                        <dd>
                                            <ul class="tree tree-lines tree-chevrons tab1_tree"></ul>
                                            <input class="tree_result" type="text" name="tab1_staff">
                                        </dd>
                                    </dl>
                                </form>
                            </li>
                            <!-- 上级 -->
                            <li class="hide">
                                <form>
                                    <dl>
                                        <dt>多人审批时采用的审批方式</dt>
                                        <dd><label class="thin"><input type="radio" name="tab2_crowd" value="1" checked>依次审批</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab2_crowd" value="2">会签（须所有审批人同意）</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab2_crowd" value="3">或签（一名审批人同意或拒绝即可）</label></dd>
                                    </dl>
                                    <dl>
                                        <dt>审批人为空时</dt>
                                        <dd><label class="thin"><input type="radio" name="tab2_blank" value="1" checked>自动通过</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab2_blank" value="2">自动转交管理员</label></dd>
                                    </dl>
                                    <dl>
                                        <dt>发起人的</dt>
                                        <dd>
                                            <select name="tab2_sender">
                                                <option value="1">直接上级  </option>
                                                <option value="2">第二级上级</option>
                                                <option value="3">第三级上级</option>
                                                <option value="4">第四级上级</option>
                                                <option value="5">第五级上级</option>
                                                <option value="6">第六级上级</option>
                                            </select>
                                        </dd>
                                    </dl>
                                </form>
                            </li>
                            <!-- 连续多级上级 -->
                            <li class="hide">
                                <form>
                                    <dl>
                                        <dt>审批终点</dt>
                                        <dd><label class="thin"><input type="radio" name="tab3_target" value="1" checked>指定职位（同时为上级线上的上级）</label></dd>
                                        <dd>
                                            <label class="thin"><input type="radio" name="tab3_target" value="2">通讯录中的</label>
                                            <select name="tab2_sender">
                                                <option value="1">直接上级  </option>
                                                <option value="2">第二级上级</option>
                                                <option value="3">第三级上级</option>
                                                <option value="4">第四级上级</option>
                                                <option value="5">第五级上级</option>
                                                <option value="6">第六级上级</option>
                                            </select>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>审批人为空时</dt>
                                        <dd><label class="thin"><input type="radio" name="tab3_blank" value="1" checked>自动通过</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab3_blank" value="2">自动转交管理员</label></dd>
                                    </dl>
                                    <dl>
                                        <dt>职位选择</dt>
                                        <dd>
                                            <ul class="tree tree-lines tree-chevrons tab3_tree"></ul>
                                            <input class="tree_result" type="text" name="tab3_staff">
                                        </dd>
                                    </dl>
                                </form>
                            </li>
                            <!-- 职位 -->
                            <li class="hide">
                                <form>
                                    <dl>
                                        <dt>多人审批时采用的审批方式</dt>
                                        <dd><label class="thin"><input type="radio" name="tab4_crowd" value="2">会签（须所有审批人同意）</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab4_crowd" value="3">或签（一名审批人同意或拒绝即可）</label></dd>
                                    </dl>
                                    <dl>
                                        <dt>审批人为空时</dt>
                                        <dd><label class="thin"><input type="radio" name="tab4_blank" value="1" checked>自动通过</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab4_blank" value="2">自动转交管理员</label></dd>
                                    </dl>
                                    <dl>
                                        <dt>职位选择</dt>
                                        <dd><label class="thin"><input type="checkbox" name="tab4_join" value="1">是否参与申请项目</label>
                                            <span class="text-gray small">如果审批过程中涉及到项目，勾选参与申请项目，才可以进行审批</span>
                                        </dd>
                                        <dd>
                                            <ul class="tree tree-lines tree-chevrons tab4_tree"></ul>
                                            <input class="tree_result" type="text" name="tab4_staff">
                                        </dd>
                                    </dl>
                                </form>
                            </li>
                            <!-- 表单中的交接人作为审批 -->
                            <li class="hide">
                                <form>
                                    <dl>
                                        <dt>多人审批时采用的审批方式</dt>
                                        <dd><label class="thin"><input type="radio" name="tab5_crowd" value="1" checked>依次审批</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab5_crowd" value="2">会签（须所有审批人同意）</label></dd>
                                        <dd><label class="thin"><input type="radio" name="tab5_crowd" value="3">或签（一名审批人同意或拒绝即可）</label></dd>
                                    </dl>
                                    <div class="text-gray small">* 一般工作交接单中</div>
                                </form>
                            </li>
                        </ol>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary setup_approval_approverSetup_submit">提交</button>
                </div>                
            </div>
        </div>
    </div>

</div>


<!-- 人员选择外套 -->
<div class="page-wrapper" id="setup_approval_salesman_wrapper">

    <!-- 人员选择盒子 -->
    <div class="modal modal-for-page fade salesman_box" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">人员选择</h4>
                </div>
                <div class="modal-body no-padding">

                    <!-- 数据网格 -->
                    <div class="datagrid datagrid-striped">

                        <!-- 工具条组 -->
                        <div class="tool-group no-padding">
                            <form class="tool-search" style="border:none;">
                                <input type="hidden" name='page'>
                                <input type="hidden" name='recPerPage'>
                                <input type="hidden" name='sid'>
                                <input type="hidden" name='search'>
                                <!-- <label><span>姓名：</span><input type="text" class="form-control" name="search"></label> -->
                                <label><span>部门：</span><select class="form-control" name="department" value="0"><!-- JS推进 --></select></label>
                                <label><button type="button" class="btn btn-primary tool_search_btn">搜索</button></label>
                                <div class="clearfix"></div>
                            </form>
                        </div>
                        <!-- tool-group -->
                        <div class="datagrid-container"></div>
                        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
                    </div>
                    <!-- datagrid -->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary salesman_submit">提交</button>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
$(function(){

    //变量声明-----------------------------------------------------------------------------------------------
    var setup_approval = $("#setup_approval"); //页面ID
    var setup_approval_api = {
        datagrid : API.test_datagrid, // 数据表格
        add : API.test_response, // ROUTE + "/MyAsk/AddApprovalBase", // 添加
        show : LOCAL + "Test/Setup/Approval/setup_approval.json", // 详情查看
        edit : API.test_response, // 修改
        del : API.test_response, // 删除
        office_approval : LOCAL + "Test/Office/approval.json", // 审批名称-树状图组件
    }

    //数据表格-----------------------------------------------------------------------------------------------
    //数据源
    var setup_approval_dataSource = {
        cols   : [
            {name:"username", label:"审批名称", width:100 },
            {name:"datetime", label:"设置时间", width:150 },
            {name:"name", label:"可见范围", width:80 },
            {name:"name", label:"发起人", width:80 },
            {name:"name", label:"审批人", width:80 },
            {name:"name", label:"抄送人", width:80 },
            {name:"", label:"操作", width:150,html:true,
                valueOperator : {
                    getter : function(dataValue,cell){
                        return `
                        <a class="line_edit_btn" dataId="${cell.config.data.id}">修改</a>
                        <a class="line_del_btn"  dataId="${cell.config.data.id}">删除</a>
                        `;
                    }
                }
            }
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : setup_approval, 
                url      : setup_approval_api.datagrid
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : setup_approval,
                data     : data
            });
        }
    };
    //实例化
    setup_approval.find('.datagrid').datagrid(
        zui_datagrid_option({
            datagrid   : setup_approval.find('.datagrid'),
            dataSource : setup_approval_dataSource
        })
    );
    var setup_approval_datagrid_obj =  setup_approval.find('.datagrid').data("zui.datagrid");
    //搜索
    setup_approval.find('.tool_search_btn').click(function(){ 
        zui_datagrid_render({
            datagrid_obj : setup_approval_datagrid_obj,
            dataSource   : setup_approval_dataSource
        }); 
    });

    //列操作-变量声明-----------------------------------------------------------------------------------------------
    var setup_approval_add_box = setup_approval.find('.tool_add_box');
    var setup_approval_edit_box = setup_approval.find('.line_edit_box');
    var setup_approval_del_box = setup_approval.find('.line_del_box');
    var setup_approval_approverSetup_box = $('.setup_approval_approverSetup_box');

    //列操作-删除-----------------------------------------------------------------------------------------------
    setup_approval.on("click", '.line_del_btn', function() {
        common_form_reset();
        setup_approval_del_box.find('[name="id"]').val( $(this).attr('dataId') );
        setup_approval_del_box.modal('show');
    });
    setup_approval.on("click", '.line_del_submit', function() {
        um_data_submit({
            url: setup_approval_api.del,
            form: setup_approval_del_box.find('form'),
            dataSource: setup_approval_dataSource,
        });
    });

    //列操作-添加-----------------------------------------------------------------------------------------------
    // 点击
    setup_approval.on("click", '.tool_add_btn', function() {
        common_form_reset();
        setup_approval.find('.tool_add_box .arrpover_group_box li').hide();
        setup_approval.find('.tool_add_box .arrpover_group_box li:nth-child(1),.tool_add_box .arrpover_group_addBtn').show();
        setup_approval_approverSetup_box.find('[name="tabBtn"]').eq(0).trigger('click');
        setup_approval_add_box.modal('show');
    });
    // 提交
    setup_approval.on("click", '.tool_add_submit', function() {
        um_data_submit({
            url: setup_approval_api.add,
            form: setup_approval_add_box.find('form'),
            dataSource: setup_approval_dataSource,
            stringify: true
        });
    });

    //列操作-修改-----------------------------------------------------------------------------------------------
    // 点击
    setup_approval.on("click", '.line_edit_btn', function() {
        setup_approval_edit_box.find('[name="id"]').val( $(this).attr('dataId') );
        $.ajax({
            url: setup_approval_api.show,
            data: { id : $(this).attr('dataId') },
            type: 'post',
            success : function(data){
                var data = data.data;
                // 审批人动态处理
                var temp = '';
                for(var i=0;i<data.approver.length;i++){
                    temp += `
                    <li>
                        <input class="form-control" name="approver[]" readonly value="${data.approver[i].value}">
                        <input type="hidden" name="other[]" value="${data.approver[i].other}">
                    </li>`;
                }
                setup_approval_edit_box.find('.arrpover_group_box').html(temp)
                // 表单赋值
                um_data_set( setup_approval_edit_box.find('form'), data );
                setup_approval_edit_box.modal('show');
            }
        });
    });
    // 提交
    setup_approval.on("click", '.line_edit_submit', function() {
        um_data_submit({
            url: setup_approval_api.edit,
            form: setup_approval_edit_box.find('form'),
            dataSource: setup_approval_dataSource,
        });
    });
    
    // 审批人设置-----------------------------------------------------------------------------------------------
    // 点击bth显示
    var setup_approval_approverSetup_btn = ''; // 添加1-9个 修改1-9个
    setup_approval.on('click', '.arrpover_group_box input[readonly]', function(){
        // 修改赋值
        var tabBtn = setup_approval_approverSetup_box.find('[name="tabBtn"]');
        var other = $(this).siblings('[type="hidden"]').val();
        console.log(other); // 此处有错
        if( other!='' ){
            other = um_json(other);
            tabBtn.eq( other.tabBtn-1 ).trigger('click');
        }  else {
            tabBtn.eq( 0 ).trigger('click');
        }
        // 按钮绑定 & 盒子显示
        setup_approval_approverSetup_btn = $(this);
        setup_approval_approverSetup_box.modal('show');
    });
    // 点击submit传值
    setup_approval.on("click", '.setup_approval_approverSetup_submit', function() {
        // 变量声明-节点
        var tabBtn = setup_approval_approverSetup_box.find('[name="tabBtn"]:checked').val();
        var tabBox = setup_approval_approverSetup_box.find('ol li').eq( tabBtn-1 ).find('form');
        // 主要信息传值
        var resultApprove = '';
        switch( tabBtn ){
            case '1' : resultApprove = '指定成员：郝月 王兆伟';break;
            case '2' : resultApprove = '上级：第2级上级';break;
            case '3' : resultApprove = '连续多级上级：从直接上级到第x级上级';break;
            case '4' : resultApprove = '职位：商务总监';break;
            case '5' : resultApprove = '表单中的交接人';break;
        }
        setup_approval_approverSetup_btn.val( resultApprove );
        // 其他信息传值
        var resultOther = JSON.stringify( um_data_get( tabBox ) );
        setup_approval_approverSetup_btn.siblings('[type="hidden"]').val( resultOther );
        // 面板隐藏
        setup_approval_approverSetup_box.modal('hide');
    });
    // 点击radio切换
    setup_approval_approverSetup_box.find('ul.tab_btn>li input[type="radio"]').change(function(){
        var olLi = setup_approval_approverSetup_box.find('ol>li');
        olLi.hide();
        olLi.eq( $(this).val() -1 ).show();
    });
    //审批人盒子-下放切换面板的重置

    //添加 修改 共用-----------------------------------------------------------------------------------------------
    // 审批名称-树状图组件
    $.ajax({
        url : setup_approval_api.office_approval,
        type    : "post",
        success : function(data){
            var data = um_json(data).children;
            $(".tree-wrap .tree-static").tree({
                data        : data,
                itemCreator : function($li,item){
                    if( !item.url ){
                        $li.append(item.title);
                    } else {
                        $li.append("<span class='text-primary' url='"+ item.url +"'>"+item.title+"</span>");
                    }
                },
            });
        }
    });
    $(".tree-wrap").click(function(e){
        e.stopPropagation();
        $(this).find('.tree-static').show();
    });
    $(".tree-wrap .tree-static").on('click', 'span', function(e){
        e.stopPropagation();
        $('.tree-wrap .tree-static').hide();
        $(this).parents('.tree-wrap').find('[readonly]').val( $(this).text() );
        $(this).parents('.tree-wrap').find('[type="hidden"]').val( $(this).attr('url') );
    });
    $(document).on('click',function(e){
        $('.document_click_hide').hide();
    });
    // 审批人-input添加
    setup_approval.on('click', '.arrpover_group_addBtn', function(){
        $(this).siblings('.arrpover_group_box').append(`<li><input class="form-control" name="approver[]" readonly><input type="hidden" name="other[]"></li>`);
    });

    // 树状图组件
    common_tree_create({
        dom : setup_approval.find(".tab1_tree"),
        is_open: true,
        is_check: true
    });
    common_tree_create({
        dom : setup_approval.find(".tab3_tree"),
        is_open: true,
        is_check: true
    });
    common_tree_create({
        dom : setup_approval.find(".tab4_tree"),
        is_open: true,
        is_check: true
    });

}); // 预加载结尾
</script>


<script>
$(function(){
   
    //变量声明
    var setup_approval_salesman_box = $('#setup_approval_salesman_wrapper .salesman_box');
    var setup_approval_salesman_api = { 
        datagrid : API.test_datagrid, // ROUTE + "/User/staffDetail"
        department : LOCAL + "Test/test_select.json",
    }
    var setup_approval_salesman_dataSource = {
        cols   : [
            {name:"name", label:"姓名",width:80 },
            {name:"departname", label:"部门",width:100},
            {name:"positionname", label:"职务"}
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : setup_approval_salesman_box, 
                url      : setup_approval_salesman_api.datagrid
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : setup_approval_salesman_box,
                data     : data
            });
        }
    };
    //实例化
    setup_approval_salesman_box.find('.datagrid').datagrid(
        zui_datagrid_option({
            datagrid   : setup_approval_salesman_box.find('.datagrid'),
            dataSource : setup_approval_salesman_dataSource,
            checkable  : true,
            height     : 300
        })
    );
    var setup_approval_salesman_datagrid_obj = setup_approval_salesman_box.find('.datagrid').data("zui.datagrid");
    //搜索
    setup_approval_salesman_box.find('.tool_search_btn').click(function(){ 
        zui_datagrid_render({
            datagrid_obj : setup_approval_salesman_datagrid_obj,
            dataSource   : setup_approval_salesman_dataSource
        }); 
    });
    //部门下拉
    um_select_option({
        dom : setup_approval_salesman_box.find('[name="department"]'),
        url : setup_approval_salesman_api.department,
        use : 'search'
    });
    //点击显示
    var setup_approval_salesman_btn = ''; // 2个dom触发
    $('#setup_approval').on('click', '[name="promoter"], [name="copyer"]',function(){
        setup_approval_salesman_btn = $(this);
        setup_approval_salesman_box.modal('show');
    });
    //选中提交
    setup_approval_salesman_box.find('.salesman_submit').click(function(){
        var data_arr = setup_approval_salesman_datagrid_obj.getCheckItems().filter(function(e){return e});
        if( data_arr.length>0 ){
            var data_id = [];
            for (var i = 0; i < data_arr.length; i++) {
                data_id.push(data_arr[i].id);
            }
            var data_user = [];
            for (var i = 0; i < data_arr.length; i++) {
                data_user.push(data_arr[i].positionname);
            }
            setup_approval_salesman_btn.val( data_user );
            setup_approval_salesman_btn.siblings('[type="hidden"]').val( data_id );
            setup_approval_salesman_box.modal("hide");
        } else {
            um_tip("至少选择一条数据","1000","text-danger");
        }
    });
    
});
</script>
